<template>
  <div class="wangEditor-Container" :class="{'wangEditor-Container full':full}">
    <!-- <div :id="editorId" :class="{'full':full}">
      <p>大家好</p>
    </div>-->
    <div :id="editorId+'-toolbar'" class="wangEditor-Toolbar"></div>
    <div class="wangEditor-custom-toolbar">
      <ul>
        <li @click="full=!full">
          <i class="el-icon-full-screen"></i>全屏
        </li>
      </ul>
    </div>
    <div :id="editorId" class="wangEditor-text-container">
      <p>请输入内容</p>
    </div>
  </div>
</template>
<script>
import E from "wangEditor";
export default {
  name: "wangEditorCom",
  props: {
    id: String
  },
  data() {
    return {
      editorId: this.id ? this.id : "editor",
      full: false
    };
  },
  //计算属性
  computed: {},
  mounted() {
    // this.initCKEditor();
    var editor = new E(`#${this.editorId}-toolbar`, `#${this.editorId}`);
    editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
    editor.create();
  },
  methods: {}
};
</script>
<style lang="scss">
.full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #ffffff;
  .w-e-text-container {
    border-bottom: 0 !important;
    height: calc(100vh - 80px) !important;
  }
}
.wangEditor-Container {
  border: 1px solid #ccc;
  border-bottom: 0;
  .wangEditor-custom-toolbar {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      li {
        padding: 5px 10px;
        cursor: pointer;
        flex: 1;
      }
    }
  }
  .w-e-text-container {
    border-bottom: 1px solid #ccc;
    height: 400px;
  }
}
</style>